<template>
  <div class="live">
      <div class="nav">
         <h3>今日必抢</h3>
         <p>手慢无🤲</p> 
      </div>
      <div class="img">
          <img src="imgs/live/l1.png" alt=""> 
      </div>
      
      <div class="nav">
         <h3>正在热议</h3>
         <p>不容错过每一个热门演出👀</p> 
       
      </div>
       <ul >
         <li v-for="(v,i) in iarr" :key="i">
              <img :src=v.img >
         </li>
       </ul>
       <div class="kaiqiang">
         <h3>即将开抢</h3>
         <p>设置提醒 不容错过⏰</p> 
         
      </div>
      <div>
           <img src="imgs/live/l3.png" >
         </div>
         <div class="last">
           <p>只有这么多了，明天再来~</p>
         </div>
         <Bb/>
  </div>
</template>

<script>
import Bb from '../components/buttomBar.vue'
export default {
  components:{
     Bb
  },
   data(){
     return {
       iarr:[
         {img:"imgs/live/l2.png" },
         {img:"imgs/live/l2.png" },
         {img:"imgs/live/l2.png" },
         {img:"imgs/live/l2.png" },
         {img:"imgs/live/l2.png" },
         {img:"imgs/live/l2.png" },
       ]
     }
   }
}
</script>

<style scoped>
.live{
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  
}
.live h2{
  text-align: center;
  margin-top: 0.1rem;
}
  .nav {
    width: 100%;
    height: 0.5rem;
    font-size: 0.2rem;
    display: flex; 
    margin-top: 0.2rem; 
  }
  .nav h3{
    margin-left: 0.2rem;
  }
  .nav p{
    margin-left: 0.2rem;
    font-size: 0.15rem;
  }
  .live .img{
     margin-left: 0.15rem;
  }
  .live .kaiqiang{
    width: 100%;
    height: 0.2rem;
    font-size: 0.2rem;
    /* background-color:red; */
    display: flex; 
    padding-bottom: 0.5rem;
  }
  .live .kaiqiang h3{
    margin-right: 0.2rem;
  }
  .live .last{
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    /* background-color: red; */
    padding-bottom: 0.6rem;
    font-size: 0.2rem;
  }
</style>